let form = layui.form
//处理下拉框的分类
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let str = template('tpl-category', res);
        $('select').html(str);
        // 模板引擎处理完之后，重新渲染select
        form.render('select');
    }
});



//调用封装好的函数 初始化 富文本编辑器
initEditor()

//处理封面图片
//1.初始化剪裁框
let $image = $('#image')
let options = {
    //宽高比
    aspectRatio: 400 / 280,
    //指定预览容器
    preview: '.img-preview'
}
$image.cropper(options)
//2.点击"选择封面"按钮,能够选择图片
$('button:contains("选择封面")').click(function () {
    $('#file').trigger('click');
  });
//3.当切换了文件域的图片, 更换剪裁区的图片
$('#file').change(function () {
    // 3.1) 找到文件对象
    let fileObj = this.files[0];
    // 3.2) 创建url
    let url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper('destroy').attr('src', url).cropper(options);
});
  





//*************** 完成添加文章 *************************************** */
$('#add-form').on('submit', function (e) {
    //阻止默认行为
    e.preventDefault();
    // 收集表单数据(必须是FormData)
    // FormData 也是根据表单name属性收集的, 所以要检查name
    let fd = new FormData(this);   // 传入表单的DOM对象
    //检查fd中有哪些数据: title, state, cate-id
    // fd.forEach((val, key) => { console.log(key, val);})
    // fd对象中，有content，但是值为空； 根本就没有 图片
    // 1. 修改content 
    // 获取富文本编辑器里面的内容，并不是追加到fd中，而是更改fd里面的内容
    fd.set('content', tinyMCE.activeEditor.getContent());
  
    // 2. 追加cover-img(剪裁图片)
    // 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
    let canvas = $image.cropper('getCroppedCanvas', {
      width: 400,
      height: 280
    });
  
    // 把canvas图片转成二进制形式
    // blob 是一个二进制大对象,把它追加到 fd中, 就会形成文件对象
    canvas.toBlob(function (blob) {
      // 追加文件对象到fd中
      fd.append('cover_img', blob);
  
      // 检查一下，fd对象中，是否取得了接口要求的所有参赛
      // fd.forEach((val, key) => {
      //     console.log(key, val);
      // });
        
      // 发送ajax请求，完成最终的添加
      $.ajax({
        type: 'POST',
        url: '/my/article/add',
          data: fd,
          processData: false, // 不要处理数据；意思是不要把对象形式的fd转换成查询字符串形式
          contentType: false, // 不要加默认的请求头（application/x-www-form-urlencoded），让浏览器自行设置请求头
          success: function (res) {
              //提示信息
               //   layer.msg(res.message);
              // 判断
              if (res.status === 0) {
                  layer.msg(res.message, { time: 1000 }, function () {
                      //1s后,跳转到 文章列表 页面
                      location.href = '/article/list.html'
                  })
              } else {
                layer.msg(res.message)
               }
        },
        
      });
    });
  })